import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';
import 'package:onlineshop/constants/my_color.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 分类数据
  final categoryList = [
    {
      'iconPath': 'assets/icons/zhuanshi.svg',
      'title': '项链',
      'id': '1',
    },
    {
      'iconPath': 'assets/icons/xinglixiang.svg',
      'title': '行李箱',
      'id': '2',
    },
    {
      'iconPath': 'assets/icons/beibao.svg',
      'title': '背包',
      'id': '3',
    },
    {
      'iconPath': 'assets/icons/yifu.svg',
      'title': '衣服',
      'id': '4',
    },
    {
      'iconPath': 'assets/icons/xie.svg',
      'title': '鞋子',
      'id': '5',
    },
  ];

  // 选中的分类索引
  int selectedCategoryIndex = 1;

  // 点击分类
  void onCategoryTap(int index) {
    setState(() {
      selectedCategoryIndex = index;
    });
  }

// 推荐商品数据
  final recommendList = [
    {
      'imagePath': 'assets/images/home/gaoduan.png',
      'title': '高端奢侈包',
      'price': '120',
      'star': '5',
      'isLove': 'true'
    },
    {
      'imagePath': 'assets/images/home/tuhao.png',
      'title': '土豪金香奈儿包',
      'price': '100',
      'star': '4.5',
      'isLove': 'false'
    },
    {
      'imagePath': 'assets/images/home/gaoduan.png',
      'title': '高端奢侈包',
      'price': '120',
      'star': '5',
      'isLove': 'false'
    },
    {
      'imagePath': 'assets/images/home/tuhao.png',
      'title': '土豪金香奈儿包',
      'price': '100',
      'star': '4.5',
      'isLove': 'false'
    },
  ];

// 最受欢迎商品数据
  final popList = [
    {
      'imagePath': 'assets/images/home/heisepibao.png',
      'title': '黑色男士皮包突出风采必选',
      'price': '120',
      'star': '5.0'
    },
    {
      'imagePath': 'assets/images/home/heihongpibao.png',
      'title': '黑红色皮包经典首款之选',
      'price': '140',
      'star': '5.0   '
    },
    {
      'imagePath': 'assets/images/home/heisepibao.png',
      'title': '黑色男士皮包突出风采必选',
      'price': '120',
      'star': '5.0'
    },
    {
      'imagePath': 'assets/images/home/heihongpibao.png',
      'title': '黑红色皮包经典首款之选',
      'price': '140',
      'star': '5.0   '
    }
  ];

  // tab索引
  int selectedTabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Row(
            children: [
              IconButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/cart');
                },
                icon: Image.asset('assets/icons/cart.png'),
              ),
            ],
          ),
        ],
        backgroundColor: const Color(MyColor.BACKGROUND_COLOR),
      ),
      backgroundColor: const Color(MyColor.BACKGROUND_COLOR),
      body: Column(
        children: [
          // 顶部分类
          SizedBox(
            height: 90,
            width: double.infinity,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: categoryList.length,
              itemBuilder: (context, index) {
                var category = categoryList[index];
                var iconPath = category['iconPath'];
                var title = category['title'];
                var id = category['id'];
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 13),
                  child: CategoryItem(
                    iconPath!,
                    title!,
                    id!,
                    selectedCategoryIndex,
                    onCategoryTap, // Pass the method here
                  ),
                );
              },
            ),
          ),

          const SizedBox(
            height: 40,
          ),

          // 推荐商品
          Column(
            children: [
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "推荐商品",
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w700,
                          color: Color(MyColor.PRIMARY_COLOR)),
                    ),
                    Text(
                      '更多',
                      style: TextStyle(
                          fontSize: 13,
                          fontWeight: FontWeight.w300,
                          color: Color(0xffF83A26)),
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              SizedBox(
                height: 215,
                width: double.infinity,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: recommendList.length,
                  itemBuilder: (context, index) {
                    var recommendItem = recommendList[index];
                    var imagePath = recommendItem['imagePath'];
                    var title = recommendItem['title'];
                    var price = recommendItem['price'];
                    var star = recommendItem['star'];
                    var isLove = recommendItem['isLove'];

                    return RecommendItem(
                      context,
                      imagePath!,
                      title!,
                      price!,
                      star!,
                      isLove!,
                    );
                  },
                ),
              )
            ],
          ),
          const SizedBox(
            height: 40,
          ),
          //  最受欢迎
          Column(
            children: [
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "最受欢迎",
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w700,
                          color: Color(MyColor.PRIMARY_COLOR)),
                    ),
                    Text(
                      '更多',
                      style: TextStyle(
                          fontSize: 13,
                          fontWeight: FontWeight.w300,
                          color: Color(0xffF83A26)),
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              SizedBox(
                  height: 87,
                  width: double.infinity,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: popList.length,
                      itemBuilder: (context, index) {
                        var popItem = popList[index];
                        var imagePath = popItem['imagePath'];
                        var title = popItem['title'];
                        var price = popItem['price'];
                        var star = popItem['star'];
                        return PopItem(
                          context,
                          imagePath!,
                          title!,
                          price!,
                          star!,
                        );
                      }))
            ],
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedTabIndex,
        onTap: (index) => {
          setState(() {
            selectedTabIndex = index;
          })
        },
        selectedItemColor: const Color(MyColor.PRIMARY_COLOR),
        unselectedItemColor: Colors.black.withOpacity(0.39),
        items: const [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home_filled,
            ),
            label: ' ',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.heart_broken,
            ),
            label: ' ',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
            ),
            label: ' ',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            label: ' ',
          ),
        ],
      ),
      floatingActionButton: ElevatedButton(
        onPressed: () {
          Navigator.pushNamed(context, '/cart');
        },
        style: ElevatedButton.styleFrom(
          shape: const CircleBorder(),
          padding: const EdgeInsets.all(16),
          backgroundColor: const Color(MyColor.PRIMARY_COLOR),
        ),
        child: SvgPicture.asset('assets/icons/cart.svg'),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: const Drawer(
        backgroundColor: Color(MyColor.BACKGROUND_COLOR),
      ),
    );
  }
}

// CategoryItem
Widget CategoryItem(
  String iconPath,
  String title,
  String id,
  int selectedCategoryIndex,
  void Function(int) onCategoryTap, // Define the type here
) {
  // Determine the background color based on the selected category
  Color bgColor = id == selectedCategoryIndex.toString()
      ? const Color(MyColor.PRIMARY_COLOR)
      : Colors.white;

  Color iconColor = id == selectedCategoryIndex.toString()
      ? const Color(0xffFFDB8B)
      : const Color(MyColor.PRIMARY_COLOR);

  return GestureDetector(
    onTap: () => onCategoryTap(int.parse(id)), // Call the method
    child: Column(
      children: [
        Container(
          width: 60,
          height: 60,
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: bgColor, // Use the non-constant bgColor
          ),
          child: SvgPicture.asset(
            iconPath,
            color: iconColor,
          ),
        ),
        const SizedBox(
          height: 8,
        ),
        Text(
          title,
          style: const TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.w700,
              color: Color(MyColor.PRIMARY_COLOR)),
        ),
      ],
    ),
  );
}

// RecommendItem
Widget RecommendItem(
  BuildContext context,
  String imagePath,
  String title,
  String price,
  String star,
  String isLove,
) {
  return GestureDetector(
    onTap: () => Navigator.pushNamed(context, '/detail'),
    child: Padding(
      padding: const EdgeInsets.only(left: 12),
      child: Container(
        height: 215,
        width: 150,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(13),
          color: Colors.white,
        ),
        child: Padding(
          padding: const EdgeInsets.all(11.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 130,
                width: 130,
                decoration: BoxDecoration(
                  color: const Color(MyColor.BACKGROUND_COLOR),
                  borderRadius: BorderRadius.circular(13),
                ),
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: Image.asset(imagePath),
                    ),
                    Positioned(
                      top: 7,
                      right: 10,
                      child: Container(
                        width: 20,
                        height: 20,
                        padding: const EdgeInsets.all(3),
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                        ),
                        child: SvgPicture.asset(
                          isLove == 'true'
                              ? 'assets/icons/heart.svg'
                              : 'assets/icons/heart_fill.svg',
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Row(
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 12,
                      color: Color(MyColor.PRIMARY_COLOR),
                      fontWeight: FontWeight.w400,
                    ),
                    textAlign: TextAlign.left,
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "¥ $price",
                    style: const TextStyle(
                      color: Color(0xffF83A26),
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Row(
                    children: [
                      const Icon(
                        Icons.star,
                        color: Color(0xffFDCD63),
                        size: 16,
                      ),
                      Text(
                        star,
                        style: TextStyle(
                          fontSize: 10,
                          fontWeight: FontWeight.w400,
                          color: const Color(MyColor.PRIMARY_COLOR)
                              .withOpacity(0.5),
                        ),
                      ),
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );
}

// PopItem
Widget PopItem(
  BuildContext context,
  String imagePath,
  String title,
  String price,
  String star,
) {
  return GestureDetector(
    onTap: () => Navigator.pushNamed(context, '/detail'),
    child: Padding(
      padding: const EdgeInsets.only(left: 12),
      child: Container(
          height: 87,
          width: 158,
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.white,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                child: Image.asset(imagePath),
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w400,
                        color: Color(MyColor.PRIMARY_COLOR),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Text(
                          "¥ $price",
                          style: const TextStyle(
                            fontSize: 10,
                            fontWeight: FontWeight.w400,
                            color: Color(0xffF83A26),
                          ),
                        ),
                        Row(
                          children: [
                            const Icon(
                              Icons.star,
                              color: Color(0xffFDCD63),
                              size: 16,
                            ),
                            Text(
                              star,
                              style: TextStyle(
                                fontSize: 10,
                                fontWeight: FontWeight.w400,
                                color: const Color(MyColor.PRIMARY_COLOR)
                                    .withOpacity(0.5),
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ],
          )),
    ),
  );
}
